<template>
  <a-spin :loading="spinLoading" :size="35" class="w-[100%]" tip="正在处理, 请稍候...">
    <a-descriptions :column="2" bordered>
      <a-descriptions-item label="镇街名称">
        {{ form.locationName }}
      </a-descriptions-item>
      <a-descriptions-item label="购买指标（亩）">
        {{ form.purchaseIndex }}
      </a-descriptions-item>
      <a-descriptions-item label="交易指标（亩）">
        {{ form.tradeIndex }}
      </a-descriptions-item>
    </a-descriptions>

    <!-- 按钮区域 -->
    <div class="flex justify-center mt-6">
      <a-space>
        <a-button @click="onCancel">关闭</a-button>
      </a-space>
    </div>
  </a-spin>
</template>

<script setup>
import {getCurrentInstance, reactive, ref, watch} from "vue";
import {getLindiIndexByLindiIndexIdApi} from "~/api/lindi/lindiIndex.js";

// 定义props
const props = defineProps({
  params: {
    type: Object,
    default: () => ({}),
  },
});

// 定义emit
const emit = defineEmits(["ok", "cancel"]);

// 全局实例
const {proxy} = getCurrentInstance();

// 加载状态
const spinLoading = ref(false);

// 表单数据
const form = reactive({
  indexId: null,
  locationName: "",
  totalIndex: "",
  purchaseIndex: "",
  tradeIndex: "",

});

// 监听参数变化
watch(
    () => props.params,
    () => {
      if (props.params.indexId) {
        loadIndexInfo(props.params.indexId);
      }
    },
    {deep: true, immediate: true}
);

// 加载指标信息
function loadIndexInfo(indexId) {
  spinLoading.value = true;
  getLindiIndexByLindiIndexIdApi(indexId)
      .then((res) => {
        Object.assign(form, res);
      })
      .catch((error) => {
        proxy.$message.error("加载指标信息失败: " + error.message);
      })
      .finally(() => {
        spinLoading.value = false;
      });
}

// 取消
function onCancel() {
  emit("cancel");
}
</script>

<style scoped>
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
</style>
